
import { Input, ScrollView, View } from "@tarojs/components";
import { useReactive, useUpdate } from "ahooks";

import ByCell from "@/components/ui/ByCell";
import ByRadio from "@/components/ui/ByRadio";
import ByButton from "@/components/ui/ByButton";
import Uploader from "@/components/app/Uploader";
import ByCellGroup from "@/components/ui/ByCellGroup";
import ByImageGroup from "@/components/ui/ByImageGroup";
import PopupContainer from "@/components/app/PopupContainer";

import { InspectionStandardContent } from "@/types/Inspection";
import type { ByPopupBottomEvent } from "@/components/ui/ByPopupBottom";

type ListItem = InspectionStandardContent & { remark?: string };

type PopupStandardContentProps = {
  title: string;
  list: ListItem[];
  onConfirm: (e: InspectionStandardContent[]) => void;
};

const cellProps = {
  border: true,
  labelWidth: "5em",
};

const StandardOption = ({ source }: { source: ListItem }) => {


  const update = useUpdate()
  const model = useReactive(source);

  const handleRadio = (checked, targetIndex) => {
    if (!checked) return;

    const list = model.options.map((e, index) => {
      e.isCheck = index === targetIndex;
      return e;
    });

    model.options = list;
update()
  };

  const picList = model.picList || [];
  const picLength = picList.length;

  return (
    <ByCellGroup className="mx-3 mb-5" title={source.quesName}>
      <ByCell label="合格状态" {...cellProps}>
        {model.options.map((option, index) => (
          <ByRadio
            key={option.optionsId + "_" + new Date()}
            checked={option.isCheck}
            className="mr-3"
            onChange={(e) => handleRadio(e, index)}
          >
            {option.optionsName}
          </ByRadio>
        ))}
      </ByCell>
      <ByCell label="备注" {...cellProps}>
        <Input
          placeholder="点击输入备注"
          className="w-full"
          value={model.quesRemark}
          onInput={(e) => (model.quesRemark = e.detail.value)}
        />
      </ByCell>
      <ByCell
        label="照片"
        vertical
        tip={picLength > 0 ? picLength + "张" : ""}
        {...cellProps}
      >
        <ByImageGroup
          showDelete
          urls={picList}
          slotFooter={
            <Uploader
              // openWatermask
              onSuccess={(res) => (model.picList = picList.concat(res))}
            />
          }
        />
      </ByCell>
    </ByCellGroup>
  );
};

export default ({
  list,
  title,
  onCancel,
  onConfirm,
}: PopupStandardContentProps & ByPopupBottomEvent) => {
  return (
    <PopupContainer title={title} onCancel={onCancel}>
      <ScrollView className="h-[75vh]" scrollY>
        {list.map((item) => (
          <StandardOption key={item.quesId} source={item} />
        ))}
        <View className="pb-3" />
      </ScrollView>

      <View className="pb-3">
        <ByButton
          size="large"
          className="w-2/3"
          onClick={() => onConfirm(list)}
        >
          确定
        </ByButton>
      </View>
    </PopupContainer>
  );
};
